<template>
  <div class="pie">
    <div class="title">
      发电运行状态
    </div>
    <div class="pie-inner" ref="ChartPie"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'ChartPie',
  props: {
    pieData: Object
  },
  data () {
    return {
      chartPie: null
    }
  },
  mounted () {
    this.initChartPie()
  },
    watch: {
        pieData: {
            handler (newValue, oldValue) {
                this.pieData = newValue
                this.initChartPie()
            },
            deep: true
        }
    },
  methods: {
    // echarts初始化
    initChartPie () {
      var option = {
        backgroundColor: '',
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   orient: 'horizontal',
        //   textStyle: {
        //     color: 'fff'
        //   },
        //   left: 'center',
        //   bottom: '10',
        //   data: ['运行台数', '待机台数', '报警台数', '故障台数', '断线台数']
        // },
        series: [
          {
            name: '发电运行状态',
            type: 'pie',
            radius: '80%',
            data: [
              {
                value: this.pieData.yunxing.value,
                name: '运行台数',
                itemStyle: {
                  normal: {
                    color: '#31a72d'
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'inner'
                  }
                }
              },
              {
                value: this.pieData.daiji.value,
                name: '待机台数',
                itemStyle: {
                  normal: {
                    color: '#33b5e3'
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'inner'
                  }
                }
              },
              {
                value: this.pieData.baojing.value,
                name: '',
                itemStyle: {
                  normal: {
                    color: '#eab839'
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'inner'
                  }
                }
              },
              {
                value: this.pieData.guzhang.value,
                name: '故障台数',
                itemStyle: {
                  normal: {
                    color: '#e24d42'
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'inner'
                  }
                }
              },
              {
                value: this.pieData.duanxian.value,
                name: '',
                itemStyle: {
                  normal: {
                    color: '#e8e8e8'
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'inner'
                  }
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie = echarts.init(this.$refs.ChartPie)
      this.chartPie.setOption(option)
      this.chartPie.on('click', function (params) {
        console.log(params)
      })
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    }
  }
}
</script>
<style lang="scss">
  .pie{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #070c1e;
    border: 1px solid #01040f;
    border-radius: 2px;
    .title{
      position: absolute;
      top: 5px;
      width: 100%;
      height: 16px;
      font-size: 14px;
      color: #fff;
      font-weight: 400;
    }
    .pie-inner{
      width: 100%;
      height: 100%;
    }
  }
</style>
